<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="app">
			<h4>查询数据</h4>
			<el-form :inline="true">
				<el-form-item label="开奖日期">
					<el-date-picker v-model="begin" type="date" placeholder="选择开始日期"></el-date-picker>
					至
					<el-date-picker v-model="end" type="date" placeholder="选择结束日期"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="query(1)">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="data" style="width: 100%">
				<el-table-column prop="id" label="编号"></el-table-column>
				<el-table-column prop="opendate" label="日期"></el-table-column>
				<el-table-column prop="num" label="期号"></el-table-column>
				<el-table-column prop="redone" label="红1"></el-table-column>
				<el-table-column prop="redtwo" label="红2"></el-table-column>
				<el-table-column prop="redthree" label="红3"></el-table-column>
				<el-table-column prop="redfour" label="红4"></el-table-column>
				<el-table-column prop="redfive" label="红5"></el-table-column>
				<el-table-column prop="redsix" label="红6"></el-table-column>
				<el-table-column prop="blue" label="篮球"></el-table-column>
				<el-table-column prop="sale" label="销售额"></el-table-column>
				<el-table-column prop="firstprize" label="一等奖"></el-table-column>
				<el-table-column prop="secondeprize" label="二等奖"></el-table-column>
			</el-table>
			<div id="pages">
				<el-pagination background
							   :page-size="5" layout="prev, pager, next"
							   :total="total"
							   @current-change="query"/>
			</div>
		</div>
		<script>
			var v = new Vue({
				el : "#app",
				data : {
					begin: '2017-01-01', end: new Date(),
					data : [],
					total : 0,
					page : 1,
					size : 5
				},
				created(){
					this.query();
				},
				methods:{
					query(currentPage){
						this.page = currentPage;
						let url = "query.s";
						axios.get(url, {
							params : {
								begin : this.fmtDate(this.begin),
								end : this.fmtDate(this.end),
								page : this.page,
								size : this.size,
							}
						}).then(res=>{
							this.data = res.data.list;
							this.total = res.data.total;
						})
					},
					fmtDate(date){
						if( typeof date == 'string'){
							return date;
						}
						let year = date.getFullYear();
						let month = date.getMonth() + 1;
						let day = date.getDate();
						if(month < 10) month = "0" + month;
						if(day < 10) day = "0" + day;
						return `${year}-${month}-${day}`;
					}
				}
			})
		</script>

	</body>
</html>

<style>
	html,
	body {
		height: 100%;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		color: #333;
	}

	#app {
		margin: 50px;
	}

	form {
		text-align: right;
		display: inline-block;
	}
	
	input{
		width: 200px;
	}

	button {
		padding: 0px 20px;
	}
	
	form{
		margin: 10px 0px;
	}
	
	table{
		width: 100%;
		border-spacing: 0px;
	}
	
	th,td{
		padding: 3px;
	}
	
	td{
		text-align: right;
	}
	
	th{
		background-color: aqua
	}
	td:nth-child(1){
		text-align: center;
	}

	#pages{
		padding: 10px;
		text-align: right;
	}
	#pages>span{
		background-color: #ddd;
		margin: 2px;
		padding: 2px 5px;
		border-radius: 2px;
		min-width: 15px;
		display: inline-block;
		text-align: center;
		cursor: pointer;
	}
	#pages>span.current{
		background-color: #aaa;
	}
	#pages>span:hover{
		background-color: beige;
		color: green;
	}

</style>
